<template>
  <!-- 学习房间主容器 -->
  <div class="study-room">
    <!-- 房间布局容器 -->
    <div class="room-container">
      <!-- 使用flex布局的房间区域 -->
      <div class="room-layout">
        <!-- 左侧学习计划面板 -->
        <div class="left-panel" :class="{ collapsed: !showLeftPanel }">
          <!-- 左侧面板折叠按钮 -->
          <div class="left-panel-toggle">
            <el-button
              @click.stop="showLeftPanel = !showLeftPanel"
              circle
              size="small"
            >
              <el-icon>
                <ArrowRight v-if="!showLeftPanel" />
                <ArrowLeft v-if="showLeftPanel" />
              </el-icon>
            </el-button>
          </div>
          <!-- 学习计时器面板 -->
          <div class="timer-panel">
            <div class="timer-display">
              <!-- 显示格式化后的学习时间 -->
              <div class="time-text">{{ formatTime(studyTimer) }}</div>
              <!-- 计时器控制按钮 -->
              <div class="timer-controls">
                <!-- 未学习时显示的开始按钮 -->
                <el-button
                  v-if="!isStudying"
                  type="primary"
                  circle
                  @click.stop="startTimer"
                >
                  <el-icon>
                    <VideoPlay />
                  </el-icon>
                </el-button>
                <!-- 学习中显示的暂停按钮 -->
                <el-button v-else type="danger" circle @click.stop="stopTimer">
                  <el-icon>
                    <VideoPause />
                  </el-icon>
                </el-button>
                <!-- 重置按钮 -->
                <el-button circle @click.stop="resetTimer">
                  <el-icon>
                    <RefreshRight />
                  </el-icon>
                </el-button>
              </div>
            </div>
          </div>

          <!-- 学习计划面板 -->
          <div class="study-plan-panel">
            <div class="panel-header">
              <h3>学习计划</h3>
              <!-- 查看计划按钮 -->
              <el-button
                type="primary"
                plain
                size="small"
                @click.stop="openPlanDialog"
                :loading="loadingPlans"
              >
                <el-icon>
                  <View />
                </el-icon>
                <span>查看计划</span>
              </el-button>
            </div>

            <!-- 计划内容包装器 -->
            <div class="plan-content-wrapper">
              <div class="plan-content">
                <!-- 当前学习计划卡片 -->
                <el-card
                  v-if="currentStudyPlan"
                  shadow="never"
                  class="plan-card"
                >
                  <!-- 卡片头部 -->
                  <template #header>
                    <div class="card-header">
                      <span>{{ currentStudyPlan.planName }}</span>
                      <!-- 计划状态标签 -->
                      <el-tag
                        :type="getStatusTagType(currentStudyPlan.status)"
                        size="small"
                      >
                        {{
                          // 根据状态显示不同文本
                          currentStudyPlan.status === "active"
                            ? "进行中"
                            : "已完成"
                        }}
                      </el-tag>
                    </div>
                  </template>

                  <!-- 卡片内容区域 -->
                  <div class="plan-card-content">
                    <!-- 完成时间显示 -->
                    <div
                      v-if="
                        currentStudyPlan.status === 'completed' &&
                        currentStudyPlan.updateTime
                      "
                      class="completion-time"
                    >
                      <el-icon>
                        <Finished />
                      </el-icon>
                      完成时间:
                      {{ formatDateTime(currentStudyPlan.updateTime) }}
                    </div>

                    <!-- 每周学习内容折叠面板 -->
                    <el-collapse v-model="activeWeek" accordion>
                      <!-- 循环渲染每一周的内容 -->
                      <el-collapse-item
                        v-for="week in currentStudyPlan.weeks"
                        :key="week.week"
                        :title="`第${week.week}周: ${week.title}`"
                        :name="week.week"
                        :class="{
                          'completed-week': week.status === 'completed',
                        }"
                      >
                        <div class="week-content-vertical">
                          <!-- 每周任务列表 -->
                          <div class="week-tasks-vertical">
                            <!-- 循环渲染每周的任务 -->
                            <div
                              v-for="(task, index) in week.content"
                              :key="index"
                              class="task-item-vertical"
                            >
                              <div class="task-text-vertical">
                                <span class="task-topic">{{ task.topic }}</span>
                                <!-- 任务完成时间 -->
                                <div
                                  v-if="task.status && task.completion_time"
                                  class="task-completion-time"
                                >
                                  <el-icon>
                                    <Finished />
                                  </el-icon>
                                  完成于:
                                  {{ formatDateTime(task.completion_time) }}
                                </div>
                                <!-- 任务状态标签 -->
                                <el-tag
                                  v-if="task.status"
                                  type="success"
                                  size="small"
                                  class="task-status-tag"
                                >
                                  已完成
                                </el-tag>
                              </div>
                            </div>
                          </div>
                          <!-- 本周练习内容 -->
                          <div class="week-exercise-vertical">
                            <el-tag
                              type="warning"
                              effect="plain"
                              class="exercise-tag"
                              >本周练习:</el-tag
                            >
                            <span class="exercise-content">{{
                              week.exercise
                            }}</span>
                          </div>
                        </div>
                      </el-collapse-item>
                    </el-collapse>

                    <!-- 学习建议部分 -->
                    <div
                      v-if="
                        currentStudyPlan.advice &&
                        currentStudyPlan.advice.length
                      "
                      class="plan-advice"
                    >
                      <el-divider content-position="left">学习建议</el-divider>
                      <ul>
                        <!-- 循环渲染每条建议 -->
                        <li
                          v-for="(advice, index) in currentStudyPlan.advice"
                          :key="index"
                        >
                          <el-icon>
                            <Star />
                          </el-icon>
                          {{ advice }}
                        </li>
                      </ul>
                    </div>
                  </div>
                </el-card>

                <!-- 空状态显示 -->
                <el-empty v-else description="暂无学习计划"> </el-empty>
              </div>
            </div>
          </div>
        </div>
        <!-- 中央视频区域组件 -->
        <div
          class="center-panel"
          :class="{
            expanded: !showChat || isDraggedOut,
            'left-expanded': !showLeftPanel,
            'right-expanded': !showChat || isDraggedOut,
          }"
        >
          <RtcArea />
        </div>

        <!-- 右侧面板占位符 -->
        <div v-if="isDraggedOut" class="right-panel-placeholder"></div>

        <!-- 右侧聊天区域 -->
        <div
          v-show="!isDraggedOut"
          ref="rightPanelRef"
          class="right-panel"
          :class="{
            collapsed: !showChat,
            dragging: isDragging,
          }"
          :style="
            isDragging
              ? {
                  position: 'fixed',
                  left: dragPosition.x + 'px',
                  top: dragPosition.y + 'px',
                  zIndex: 1000,
                  width: '380px',
                  height: '520px',
                }
              : {}
          "
        >
          <!-- 拖拽句柄 -->
          <div
            ref="dragHandle"
            class="drag-handle"
            @mousedown.stop="handleDragStart"
            v-show="showChat"
          >
            <el-icon class="drag-icon">
              <Operation />
            </el-icon>
          </div>

          <!-- 聊天面板 -->
          <div class="chat-panel" v-show="showChat">
            <div class="chat-header">
              <!-- 聊天模式选项卡 -->
              <el-tabs v-model="chatMode">
                <el-tab-pane label="AI助手" name="ai"></el-tab-pane>
                <el-tab-pane label="多人聊天室" name="room"></el-tab-pane>
              </el-tabs>
              <div class="header-actions" v-show="chatMode === 'ai'">
                <!-- 重置位置按钮 -->
                <el-tooltip
                  content="重置位置"
                  placement="bottom"
                  v-if="isDraggedOut"
                >
                  <el-button size="small" circle @click.stop="resetPanelPosition">
                    <el-icon>
                      <RefreshRight />
                    </el-icon>
                  </el-button>
                </el-tooltip>
                <!-- 独立窗口按钮 -->
                <!-- <el-tooltip content="在独立窗口中打开" placement="bottom">
                  <el-button size="small" circle @click.stop="openInDetachedWindow">
                    <el-icon>
                      <CopyDocument />
                    </el-icon>
                  </el-button>
                </el-tooltip> -->
                <!-- 全屏聊天按钮 -->
                <el-tooltip content="全屏聊天" placement="bottom">
                  <el-button size="small" circle @click.stop="goToChatPage">
                    <el-icon>
                      <FullScreen />
                    </el-icon>
                  </el-button>
                </el-tooltip>
              </div>
            </div>
            <!-- 聊天消息容器 -->
            <div class="chat-messages" ref="chatContainer">
              <ChatContent
                v-show="chatMode === 'ai' && !isDraggedOut"
                ref="chatRef"
                height="65vh"
              />
              <RoomChatContent
                v-show="chatMode === 'room' && !isDraggedOut"
                ref="roomChatRef"
              />
            </div>
            <!-- 聊天输入区域 -->
            <div class="chat-input">
              <ChatInput v-if="chatMode === 'ai' && !isDraggedOut" />
              <RoomChatInput
                v-show="chatMode === 'room' && !isDraggedOut"
                @send="onRoomChatSend"
              />
            </div>
          </div>
          <!-- 面板切换按钮 -->
          <div class="panel-toggle">
            <el-button @click.stop="showChat = !showChat" circle>
              <el-icon>
                <ArrowLeft v-show="showChat" />
                <ArrowRight v-show="!showChat" />
              </el-icon>
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 拖拽出来的独立面板 -->
    <div
      v-if="isDraggedOut"
      class="dragged-panel"
      :style="{
        position: 'fixed',
        left: dragPosition.x + 'px',
        top: dragPosition.y + 'px',
        zIndex: 1000,
        width: '380px',
        height: '520px',
        resize: 'both',
      }"
    >
      <!-- 拖拽句柄 -->
      <div
        ref="dragHandle"
        class="drag-handle"
        @mousedown.stop="handleDragStart"
        v-show="showChat"
      >
        <el-icon class="drag-icon">
          <Operation />
        </el-icon>
      </div>

      <!-- 聊天面板 -->
      <div class="chat-panel" v-show="showChat">
        <div class="chat-header">
          <!-- 聊天模式选项卡 -->
          <el-tabs v-model="chatMode">
            <el-tab-pane label="AI助手" name="ai"></el-tab-pane>
            <el-tab-pane label="多人聊天室" name="room"></el-tab-pane>
          </el-tabs>
          <div class="header-actions" v-show="chatMode === 'ai'">
            <!-- 重置位置按钮 -->
            <el-tooltip content="重置位置" placement="bottom">
              <el-button size="small" circle @click.stop="resetPanelPosition">
                <el-icon>
                  <RefreshRight />
                </el-icon>
              </el-button>
            </el-tooltip>
            <!-- 全屏聊天按钮 -->
            <el-tooltip content="全屏聊天" placement="bottom">
              <el-button size="small" circle @click.stop="goToChatPage">
                <el-icon>
                  <FullScreen />
                </el-icon>
              </el-button>
            </el-tooltip>
          </div>
        </div>
        <!-- 聊天消息容器 -->
        <div class="chat-messages" ref="chatContainer">
          <ChatContent
            v-show="chatMode === 'ai' && isDraggedOut"
            ref="draggedChatRef"
            height="65vh"
          />
          <RoomChatContent
            v-show="chatMode === 'room' && isDraggedOut"
            ref="draggedRoomChatRef"
          />
        </div>
        <!-- 聊天输入区域 -->
        <div class="chat-input">
          <ChatInput v-if="chatMode === 'ai' && isDraggedOut" />
          <RoomChatInput
            v-show="chatMode === 'room' && isDraggedOut"
            @send="onRoomChatSend"
          />
        </div>
      </div>
    </div>

    <!-- 计划选择对话框 选择不同的学习计划-->
    <el-dialog v-model="showPlanDialog" title="选择学习计划" width="50%">
      <!-- 计划表格 -->
      <el-table
        :data="userPlans"
        stripe
        @row-click="handlePlanSelect"
        v-loading="loadingPlans"
      >
        <el-table-column prop="planName" label="计划名称" width="180" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusTagType(row.status)" size="small">
              {{ row.status === "active" ? "进行中" : "已完成" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="planProgress" label="进度" width="120">
          <template #default="{ row }">
            <el-progress
              :percentage="row.planProgress"
              :status="row.status === 'completed' ? 'success' : ''"
            />
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
          <template #default="{ row }">
            {{ formatDateTime(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button
              type="primary"
              size="small"
              @click.stop.stop="handlePlanSelect(row)"
            >
              选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-button @click.stop="showPlanDialog = false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
// 导入Vue相关功能
import {
  ref,
  computed,
  onMounted,
  watch,
  provide,
  inject,
  onUnmounted,
} from "vue";
// 导入路由相关功能
import { useRoute, useRouter } from "vue-router";
// 导入状态管理
import { useStudyRoomStore } from "@/stores";
import { useUserStore } from "@/stores";
import { usePlanStore } from "@/stores/modules/plan/index";
// 导入Element Plus组件和图标
import { ElMessage } from "element-plus";
import {
  VideoPlay,
  VideoPause,
  RefreshRight,
  ChatDotRound,
  FullScreen,
  Star,
  Finished,
  View,
  CopyDocument,
  ArrowLeft,
  ArrowRight,
  Operation,
} from "@element-plus/icons-vue";
// 导入自定义组件
import RtcArea from "./RtcArea.vue"; // 视频区域组件
import ChatContent from "../chat/component/ChatContent.vue";
import ChatInput from "../chat/component/ChatInput.vue";
import RoomChatContent from "./commponent/RoomChatContent.vue";
import RoomChatInput from "./commponent/RoomChatInput.vue";

onUnmounted(() => {
  ElMessage.success("您已离开房间");
});
// 初始化路由和状态管理
const route = useRoute();
const router = useRouter();
const studyRoomStore = useStudyRoomStore();
const userStore = useUserStore();
const planStore = usePlanStore();
//父组件传值接收最小化方法

const minimizeWindow = inject<() => void>("minimizeWindow", () => {
  console.warn("minimizeWindow function is not provided");
});

// 定义响应式变量
const showChat = ref(true); // 是否显示聊天面板
const showLeftPanel = ref(true); // 是否显示左侧面板
const chatMode = ref("ai"); // 当前聊天模式
const activeWeek = ref<number | null>(null); // 当前激活的周数
const chatContainer = ref<HTMLElement>(); // 聊天容器引用
const chatRef = ref(); // 聊天内容组件引用
const roomChatRef = ref(); // 多人聊天室内容组件引用
const draggedChatRef = ref(); // 拖拽面板AI聊天内容组件引用
const draggedRoomChatRef = ref(); // 拖拽面板多人聊天室内容组件引用
const showPlanDialog = ref(false); // 是否显示计划选择对话框
const userPlans = ref<any[]>([]); // 用户的所有计划
const loadingPlans = ref(false); // 是否正在加载计划

// 拖拽相关状态
const isDragging = ref(false); // 是否正在拖拽
const isDraggedOut = ref(false); // 是否已拖拽出来
const dragPosition = ref({ x: 0, y: 0 }); // 拖拽位置
const dragOffset = ref({ x: 0, y: 0 }); // 拖拽偏移量
const rightPanelRef = ref<HTMLElement>(); // 右侧面板引用
const dragHandle = ref<HTMLElement>(); // 拖拽句柄引用

// 提供submitEmitHandler方法给子组件
provide("submitEmitHandler", submitEmitHandler);

/**
 * 处理消息提交
 * @param params 消息内容
 */
async function submitEmitHandler(params: string) {
  if (chatMode.value === "ai") {
    if (isDraggedOut.value && draggedChatRef.value) {
      await draggedChatRef.value.answerHandler(params);
    } else if (!isDraggedOut.value && chatRef.value) {
      await chatRef.value.answerHandler(params);
    }
  } else if (chatMode.value === "room") {
    if (isDraggedOut.value && draggedRoomChatRef.value) {
      await draggedRoomChatRef.value.appendMessage(params);
    } else if (!isDraggedOut.value && roomChatRef.value) {
      await roomChatRef.value.appendMessage(params);
    }
  }
}
// 计算当前学习计划
const currentStudyPlan = computed(() => {
  if (!planStore.currentPlan) return null;

  // 确保planContent是解析后的对象
  let plan = { ...planStore.currentPlan };

  // 处理planContent - 可能是字符串需要解析
  if (typeof plan.planContent === "string") {
    try {
      plan.planContent = JSON.parse(plan.planContent);
    } catch (e) {
      console.error("解析planContent失败:", e);
      plan.planContent = { weeks: [], advice: [] };
    }
  } else if (!plan.planContent) {
    plan.planContent = { weeks: [], advice: [] };
  }

  // 确保有weeks数组
  if (!plan.planContent.weeks) {
    plan.planContent.weeks = [];
  }

  // 确保每个week有content数组
  plan.planContent.weeks.forEach((week: any) => {
    if (!week.content) {
      week.content = [];
    }
  });

  // 返回格式化后的计划对象
  return {
    ...plan,
    weeks: plan.planContent.weeks, // 周内容
    advice: plan.planContent.advice || [], // 学习建议
    status: plan.planProgress >= 100 ? "completed" : "active", // 根据进度计算状态
  };
});

// 查找第一个进行中的周并激活
const findFirstActiveWeek = () => {
  if (!currentStudyPlan.value) return;

  // 查找第一个未完成的周
  const activeWeekIndex = currentStudyPlan.value.weeks.findIndex(
    (week: any) => week.status !== "completed"
  );

  // 找到未完成的周则激活它
  if (activeWeekIndex !== -1) {
    activeWeek.value = currentStudyPlan.value.weeks[activeWeekIndex].week;
  }
};

// 监听当前学习计划变化
watch(
  currentStudyPlan,
  (newVal) => {
    if (newVal) {
      findFirstActiveWeek();
    }
  },
  { immediate: true }
);

// 加载用户的所有计划
const loadUserPlans = async () => {
  try {
    loadingPlans.value = true;
    const userId = userStore.currentUser?.userId;

    // 检查用户是否登录
    if (!userId) {
      ElMessage.warning("请先登录");
      return;
    }

    // 调用接口获取用户所有计划
    const response = await planStore.getPlansByUserId(userId);
    console.log("response", response);

    // 处理返回数据
    if (response.data && Array.isArray(response.data)) {
      userPlans.value = response.data.map((plan: any) => {
        // 解析planContent
        let content = { weeks: [], advice: [] };
        if (typeof plan.planContent === "string") {
          try {
            content = JSON.parse(plan.planContent);
          } catch (e) {
            console.error("解析planContent失败:", e);
          }
        } else if (plan.planContent) {
          content = plan.planContent;
        }

        // 计算进度
        // 总任务数 = 所有周的任务数之和
        const totalTasks =
          content.weeks?.reduce(
            (sum: number, week: any) => sum + (week.content?.length || 0),
            0
          ) || 0;
        // 已完成任务数 = 所有周已完成的任务数之和
        const completedTasks =
          content.weeks?.reduce(
            (sum: number, week: any) =>
              sum +
              (week.content?.filter((task: any) => task.status)?.length || 0),
            0
          ) || 0;
        // 计算进度百分比
        const progress =
          totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0;

        // 返回格式化后的计划
        return {
          ...plan,
          planContent: content,
          planProgress: progress,
          status: progress >= 100 ? "completed" : "active",
        };
      });
    } else {
      userPlans.value = [];
    }
  } catch (error) {
    console.error("加载用户计划失败:", error);
    ElMessage.error("加载计划列表失败");
  } finally {
    loadingPlans.value = false;
  }
};

// 打开计划对话框时加载计划
const openPlanDialog = async () => {
  showPlanDialog.value = true; // 显示对话框
  await loadUserPlans(); // 加载用户计划
};

/**
 * 处理计划选择
 * @param plan 选择的计划
 */
const handlePlanSelect = async (plan: any) => {
  try {
    // 格式化计划数据
    let content = { weeks: [], advice: [] };
    if (typeof plan.planContent === "string") {
      try {
        content = JSON.parse(plan.planContent);
      } catch (e) {
        console.error("解析planContent失败:", e);
      }
    } else if (plan.planContent) {
      content = plan.planContent;
    }

    // 创建格式化后的计划对象
    const formattedPlan = {
      ...plan,
      planContent: content,
      weeks: content.weeks || [],
      advice: content.advice || [],
      status: plan.planProgress >= 100 ? "completed" : "active",
    };

    // 保存到store
    planStore.setCurrentPlan(formattedPlan);
    showPlanDialog.value = false;
    ElMessage.success(`已切换到计划: ${plan.planName}`);
  } catch (error) {
    console.error("切换计划失败:", error);
    ElMessage.error("切换计划失败");
  }
};

// 计算属性和状态
const studyTimer = computed(() => studyRoomStore.studyTimer); // 学习计时器
const isStudying = computed(() => studyRoomStore.isStudying); // 是否正在学习

// 组件挂载时执行的逻辑
onMounted(() => {
  const roomId = route.params.id as string;
  loadRoomData(roomId);

  // 添加窗口大小改变事件监听器
  window.addEventListener("resize", adjustPanelPositionOnResize);
});
// 组件卸载时移除事件监听器
onUnmounted(() => {
  window.removeEventListener("resize", adjustPanelPositionOnResize);
});
/**
 * 加载房间数据
 * @param roomId 房间ID
 */
const loadRoomData = (roomId: string) => {
  // 加载房间数据
};
// 窗口大小改变时调整面板位置
const adjustPanelPositionOnResize = () => {
  if (!isDraggedOut.value || !rightPanelRef.value) return;

  const panelRect = rightPanelRef.value.getBoundingClientRect();
  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;

  let adjustedX = dragPosition.value.x;
  let adjustedY = dragPosition.value.y;

  // 确保面板不会移出右边界
  if (adjustedX + panelRect.width > viewportWidth) {
    adjustedX = viewportWidth - panelRect.width;
  }

  // 确保面板不会移出下边界
  if (adjustedY + panelRect.height > viewportHeight) {
    adjustedY = viewportHeight - panelRect.height;
  }

  // 确保面板不会移出左边界和上边界
  adjustedX = Math.max(0, adjustedX);
  adjustedY = Math.max(0, adjustedY);

  dragPosition.value = { x: adjustedX, y: adjustedY };
};
/**
 * 格式化时间显示
 * @param seconds 总秒数
 * @returns 格式化后的时间字符串(HH:MM:SS)
 */
const formatTime = (seconds: number) => {
  const hours = Math.floor(seconds / 3600); // 计算小时
  const minutes = Math.floor((seconds % 3600) / 60); // 计算分钟
  const secs = seconds % 60; // 计算秒数
  // 补零并拼接成字符串
  return `${hours.toString().padStart(2, "0")}:${minutes
    .toString()
    .padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
};

/**
 * 格式化日期时间
 * @param dateTime 日期时间字符串
 * @returns 格式化后的日期时间字符串(YYYY-MM-DD HH:MM)
 */
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return "";
  const date = new Date(dateTime);
  return `${date.getFullYear()}-${(date.getMonth() + 1)
    .toString()
    .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")} ${date
    .getHours()
    .toString()
    .padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`;
};

/**
 * 根据状态获取标签类型
 * @param status 状态值
 * @returns Element Plus标签类型
 */
const getStatusTagType = (status: string) => {
  switch (status) {
    case "active":
      return "success";
    case "completed":
      return "info";
    case "paused":
      return "warning";
    default:
      return "";
  }
};

// 计时器控制方法
const startTimer = () => {
  studyRoomStore.startStudyTimer(); // 开始计时
};

const stopTimer = () => {
  studyRoomStore.stopStudyTimer(); // 暂停计时
};

const resetTimer = () => {
  studyRoomStore.resetStudyTimer(); // 重置计时
};

// 跳转到全屏聊天页面
const goToChatPage = () => {
  minimizeWindow();
  router.push("/ai");
};

// // 检查是否在Electron环境中
// const isElectron = () => {
//   return typeof window !== "undefined" && window.require;
// };

// // 获取Electron IPC
// const getIPC = () => {
//   if (isElectron()) {
//     const { ipcRenderer } = window.require("electron");
//     return ipcRenderer;
//   }
//   return null;
// };

// // 在独立窗口中打开
// const openInDetachedWindow = async () => {
//   if (isElectron()) {
//     try {
//       const ipc = getIPC();
//       if (ipc) {
//         await ipc.invoke("create-study-room-window");
//         ElMessage.success("独立窗口已创建，即使浏览器最小化也可以看到聊天界面");
//       }
//     } catch (error) {
//       console.error("创建独立窗口失败:", error);
//       ElMessage.error("创建独立窗口失败");
//     }
//   } else {
//     //获取当前浏览器地址
//     let url = location.href;
//     // 在浏览器中，在新窗口打开
//     const newWindow = window.open(
//       url,
//       "StudyRoomDetached",
//       "width=400,height=600,resizable=yes,scrollbars=yes"
//     );
//     if (newWindow) {
//       ElMessage.success("已在新窗口中打开聊天界面");
//     } else {
//       ElMessage.error("无法打开新窗口，可能被浏览器阻止");
//     }
//   }
// };

/**
 * 房间聊天发送消息处理
 * @param content 消息内容
 */
function onRoomChatSend(content: string) {
  if (isDraggedOut.value && draggedRoomChatRef.value) {
    draggedRoomChatRef.value?.appendMessage?.(content);
  } else if (!isDraggedOut.value && roomChatRef.value) {
    roomChatRef.value?.appendMessage?.(content);
  }
}

// 拖拽事件处理函数
const handleDragStart = (event: MouseEvent) => {
  if (!rightPanelRef.value) return;

  event.preventDefault();
  isDragging.value = true;

  // 设置初始位置为屏幕正中央
  const container = document.querySelector(".study-room");
  if (container) {
    const containerRect = container.getBoundingClientRect();
    const panelWidth = 380; // 拖拽面板宽度
    const panelHeight = 520; // 拖拽面板高度

    // 计算中心位置（相对于container）
    const centerX = containerRect.left + (containerRect.width - panelWidth) / 2;
    const centerY =
      containerRect.top + (containerRect.height - panelHeight) / 2;

    // 更新拖拽位置
    dragPosition.value = {
      x: centerX,
      y: centerY,
    };
  }

  const rect = rightPanelRef.value.getBoundingClientRect();
  dragOffset.value = {
    x: event.clientX - rect.left,
    y: event.clientY - rect.top,
  };

  document.addEventListener("mousemove", handleDragMove);
  document.addEventListener("mouseup", handleDragEnd);
  document.body.style.userSelect = "none";
};

const handleDragMove = (event: MouseEvent) => {
  if (!isDragging.value || !rightPanelRef.value) return;

  event.preventDefault();

  // 获取.study-room容器的边界信息
  const container = document.querySelector(".study-room");
  if (!container) return;

  const containerRect = container.getBoundingClientRect();
  const panelRect = rightPanelRef.value.getBoundingClientRect();

  // 计算新的位置
  let newX = event.clientX - dragOffset.value.x;
  let newY = event.clientY - dragOffset.value.y;

  // 限制在.study-room容器范围内
  // 左边界
  newX = Math.max(containerRect.left, newX);
  // 右边界
  newX = Math.min(containerRect.right - panelRect.width, newX);
  // 上边界
  newY = Math.max(containerRect.top, newY);
  // 下边界
  newY = Math.min(containerRect.bottom - panelRect.height, newY);

  dragPosition.value = { x: newX, y: newY };
};

const handleDragEnd = () => {
  isDragging.value = false;
  document.removeEventListener("mousemove", handleDragMove);
  document.removeEventListener("mouseup", handleDragEnd);
  document.body.style.userSelect = "";

  if (!rightPanelRef.value) return;

  // 获取.study-room容器的边界信息
  const container = document.querySelector(".study-room");
  if (!container) return;

  const containerRect = container.getBoundingClientRect();
  const panelRect = rightPanelRef.value.getBoundingClientRect();

  // 确保面板在.study-room容器内
  let adjustedX = dragPosition.value.x;
  let adjustedY = dragPosition.value.y;

  // 限制X轴范围
  adjustedX = Math.max(containerRect.left, adjustedX);
  adjustedX = Math.min(containerRect.right - panelRect.width, adjustedX);

  // 限制Y轴范围
  adjustedY = Math.max(containerRect.top, adjustedY);
  adjustedY = Math.min(containerRect.bottom - panelRect.height, adjustedY);

  // 更新位置
  dragPosition.value = { x: adjustedX, y: adjustedY };

  // 检查拖拽距离，决定是否拖拽出来
  const threshold = 100;
  // 使用相对.container的位置来判断是否拖拽出来
  const relativeX = adjustedX - containerRect.left;
  const relativeY = adjustedY - containerRect.top;

  if (relativeX > threshold || relativeY > threshold) {
    isDraggedOut.value = true;
  } else {
    // 未超过阈值，重置位置
    isDraggedOut.value = false;
    dragPosition.value = { x: 0, y: 0 };
  }
};

// 重置面板位置
const resetPanelPosition = () => {
  isDraggedOut.value = false;
  dragPosition.value = { x: 0, y: 0 };
};

// 监听拖拽状态变化，确保滚动条在底部
watch(
  isDraggedOut,
  (newValue) => {
    if (newValue) {
      // 拖拽出来后，延迟一下确保DOM更新完成再滚动
      setTimeout(() => {
        // 根据当前聊天模式滚动对应的组件
        if (
          chatMode.value === "ai" &&
          draggedChatRef.value &&
          draggedChatRef.value.scrollBottom
        ) {
          draggedChatRef.value.scrollBottom();
        }

        // 同时滚动外层容器到底部
        const chatContainer = document.querySelector(
          ".dragged-panel .chat-messages"
        );
        if (chatContainer) {
          chatContainer.scrollTop = chatContainer.scrollHeight;
        }
      }, 200);
    }
  },
  { immediate: false }
);
</script>

<style scoped>
/* 学习房间主样式 - 最外层样式 */
.study-room {
  height: 100%; /* 最小高度为视口高度 */
  width: 100%;
}

/* 房间容器样式 - 控制整体高度 */
.room-container {
  height: 100%; /* 高度为视口高度减去60px(可能为导航栏高度) */
}

/* 房间布局样式 - 主要布局容器 */
.room-layout {
  display: flex; /* 弹性布局 */
  height: 100%; /* 高度100% */
  gap: 1px; /* 子元素间隔1px */
}

/* 左侧面板样式 - 学习计划和计时器 */
.left-panel {
  width: 20%; /* 固定宽度 */
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fafc 100%
  ); /* 白色渐变背景 */
  border-radius: 16px 0 0 16px; /* 左上和左下圆角 */
  display: flex;
  flex-direction: column; /* 垂直排列 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* 阴影效果 */
  overflow: hidden; /* 隐藏溢出内容 */
  position: relative; /* 为子元素定位做准备 */
  transition: width 0.3s ease; /* 宽度变化动画 */
}

/* 左侧面板折叠状态 */
.left-panel.collapsed {
  width: 4px; /* 极窄的宽度 */
  min-width: 4px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 0 8px 8px 0;
}

/* 左侧面板切换按钮 */
.left-panel-toggle {
  position: absolute;
  top: 50%;
  right: -16px;
  transform: translateY(-50%);
  z-index: 10;
}

.left-panel-toggle .el-button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: #3b82f6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
}

.left-panel-toggle .el-button:hover {
  background: #3b82f6;
  color: white;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* 折叠状态下隐藏内容 */
.left-panel.collapsed .timer-panel,
.left-panel.collapsed .study-plan-panel {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* 展开状态下显示内容 */
.left-panel:not(.collapsed) .timer-panel,
.left-panel:not(.collapsed) .study-plan-panel {
  opacity: 1;
  transition: opacity 0.3s ease 0.1s;
}
/* 中央视频区域样式 */
.center-panel {
  width: 60%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  transition: width 0.3s ease;
}

/* 当右侧面板折叠时，中央面板自动扩展 */
.center-panel.expanded {
  width: calc(80% - 10px);
}

/* 当左侧面板折叠时，中央面板扩展 */
.center-panel.left-expanded {
  width: calc(60% + 20% - 4px);
}

/* 当右侧面板折叠时，中央面板扩展 */
.center-panel.right-expanded {
  width: calc(60% + 20% - 4px);
}

/* 当两个面板都折叠时，中央面板最大化 */
.center-panel.left-expanded.right-expanded {
  width: calc(100% - 8px);
}

/* 当右侧面板拖拽出来时，中央面板自动扩展到全宽度 */
.center-panel.drag-expanded {
  width: calc(80% - 10px);
  transition: width 0.3s ease;
}
/* 右侧面板样式 */
.right-panel {
  width: 20%;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 0 16px 16px 0;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: width 0.3s ease;
}

/* 右侧面板折叠状态 */
.right-panel.collapsed {
  width: 4px;
  min-width: 4px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 8px 0 0 8px;
}

/* 学习计划面板样式 */
.study-plan-panel {
  flex: 1; /* 占据剩余空间 */
  padding: 16px; /* 内边距 */
  border-bottom: 1px solid rgba(226, 232, 240, 0.6); /* 底部边框 */
  display: flex;
  flex-direction: column; /* 垂直排列 */
  min-height: 0; /* 解决flex容器高度计算问题 */
}

/* 完成时间样式 */
.completion-time {
  padding: 0 20px 10px; /* 内边距 */
  color: #666; /* 文字颜色 */
  font-size: 13px; /* 字体大小 */
  display: flex;
  align-items: center; /* 垂直居中 */
  gap: 5px; /* 元素间距 */
}

.completion-time .el-icon {
  color: #67c23a; /* 完成图标颜色(绿色) */
}

/* 面板头部样式 */
.panel-header {
  display: flex;
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 20px; /* 底部外边距 */
}

.panel-header h3 {
  margin: 0; /* 去除默认外边距 */
  color: #1e293b; /* 标题颜色 */
  font-size: 18px; /* 字体大小 */
  font-weight: 700; /* 加粗 */
  letter-spacing: -0.025em; /* 字母间距 */
}

/* 计划内容包装器样式 */
.plan-content-wrapper {
  flex: 1; /* 占据剩余空间 */
  overflow: hidden; /* 隐藏溢出 */
  display: flex;
  flex-direction: column; /* 垂直排列 */
}

.plan-content {
  overflow-y: auto; /* 垂直滚动 */
  overflow-x: hidden; /* 隐藏水平滚动 */
  padding-bottom: 10px; /* 底部内边距 */
  flex: 1;
  min-height: 0; /* 解决flex容器滚动问题 */
}

/* 计划卡片样式 */
.plan-card {
  border-radius: 12px; /* 圆角 */
  border: 1px solid #ebeef5; /* 边框 */
  width: 100%; /* 宽度100% */
  height: 100%; /* 高度自适应 */
  display: flex;
  flex-direction: column; /* 垂直排列 */
  overflow: hidden; /* 隐藏溢出 */
}

/* 卡片头部样式 */
.card-header {
  display: flex;
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
}

/* 卡片内容区域样式 */
.plan-card-content {
  flex: 1; /* 占据剩余空间 */
  overflow-y: auto; /* 垂直滚动 */
  overflow-x: hidden; /* 隐藏水平滚动 */
  min-height: 0; /* 解决flex容器高度计算问题 */
}

/* 覆盖Element Plus卡片默认样式 */
.plan-card :deep(.el-card__body) {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

/* 垂直布局的周内容样式 */
.week-content-vertical {
  padding: 8px; /* 内边距 */
  width: 100%; /* 宽度100% */
}

/* 周任务列表样式 */
.week-tasks-vertical {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  gap: 8px; /* 项目间距 */
}

/* 任务项样式 */
.task-item-vertical {
  padding: 8px 12px; /* 内边距 */
  border: 1px solid #ebeef5; /* 边框 */
  border-radius: 4px; /* 圆角 */
  background: #f8f9fa; /* 背景色 */
  margin-bottom: 8px; /* 底部外边距 */
  position: relative; /* 相对定位 */
}

/* 任务文本样式 */
.task-text-vertical {
  white-space: normal; /* 正常换行 */
  line-height: 1.6; /* 行高 */
}

.task-topic {
  display: block; /* 块级元素 */
  margin-bottom: 4px; /* 底部外边距 */
  font-size: 14px; /* 字体大小 */
}

/* 任务完成时间样式 */
.task-completion-time {
  font-size: 12px; /* 较小字体 */
  color: #67c23a; /* 绿色文字 */
  display: flex;
  align-items: center; /* 垂直居中 */
  gap: 4px; /* 元素间距 */
}

/* 任务状态标签样式 */
.task-status-tag {
  position: absolute; /* 绝对定位 */
  top: 8px; /* 距离顶部 */
  right: 8px; /* 距离右侧 */
}

/* 已完成任务样式 */
.task-item-vertical.completed {
  background-color: #f0f9eb; /* 浅绿色背景 */
  border-color: #e1f3d8; /* 边框颜色 */
}

/* 本周练习区域样式 */
.week-exercise-vertical {
  margin-top: 16px; /* 顶部外边距 */
  padding: 8px; /* 内边距 */
  background: #f8f9fa; /* 背景色 */
  border-radius: 4px; /* 圆角 */
  display: flex;
  align-items: flex-start; /* 顶部对齐 */
  overflow-x: auto; /* 水平滚动 */
  white-space: nowrap; /* 不换行 */
}

.exercise-content {
  margin-left: 8px; /* 左侧外边距 */
  white-space: nowrap; /* 不换行 */
}

/* 已完成周的特殊样式 */
:deep(.completed-week) .el-collapse-item__header {
  color: #999; /* 灰色文字 */
  background-color: #f5f5f5; /* 浅灰色背景 */
}

:deep(.completed-week) .el-collapse-item__arrow {
  color: #999; /* 箭头颜色 */
}

/* 折叠面板样式 */
.el-collapse {
  --el-collapse-header-height: 36px; /* 头部高度 */
  --el-collapse-content-font-size: 13px; /* 内容字体大小 */
}

.el-collapse-item__header {
  padding: 0 8px; /* 内边距 */
}

.el-collapse-item__content {
  overflow: visible !important; /* 内容可见 */
}

/* 计时器面板样式 */
.timer-panel {
  padding: 24px; /* 内边距 */
  background: linear-gradient(
    135deg,
    #f0f9ff 0%,
    #e0f2fe 100%
  ); /* 蓝色渐变背景 */
  border-radius: 16px; /* 圆角 */
  margin: 16px; /* 外边距 */
}

.timer-display {
  text-align: center; /* 文本居中 */
}

/* 时间显示文本样式 */
.time-text {
  font-size: 2.25rem; /* 大字体 */
  font-weight: 800; /* 加粗 */
  color: #0369a1; /* 蓝色文字 */
  margin-bottom: 20px; /* 底部外边距 */
  letter-spacing: -0.05em; /* 字母间距 */
  text-shadow: 0 2px 4px rgba(3, 105, 161, 0.1); /* 文字阴影 */
}

/* 计时器控制按钮样式 */
.timer-controls {
  display: flex;
  justify-content: center; /* 水平居中 */
  gap: 12px; /* 按钮间距 */
}

/* 聊天面板样式 */
.chat-panel {
  height: 100%; /* 高度100% */
  display: flex;
  flex-direction: column; /* 垂直排列 */
  background: rgba(255, 255, 255, 0.95); /* 半透明白色背景 */
  backdrop-filter: blur(10px); /* 背景模糊 */
}

/* 聊天头部样式 */
.chat-header {
  display: flex;
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
  padding: 0 24px; /* 内边距 */
  background: linear-gradient(
    135deg,
    #fafbfc 0%,
    #f1f5f9 100%
  ); /* 浅灰色渐变 */
}

.header-actions {
  display: flex;
  gap: 8px; /* 元素间距 */
}

/* 聊天消息区域样式 */
.chat-messages {
  flex: 1; /* 占据剩余空间 */
  overflow-y: auto; /* 恢复滚动条 */
  padding: 24px; /* 内边距 */
  background: transparent; /* 透明背景 */
}

/* 聊天输入区域样式 */
.chat-input {
  padding: 24px; /* 内边距 */
  border-top: 1px solid rgba(226, 232, 240, 0.6); /* 顶部边框 */
  background: linear-gradient(
    135deg,
    #fafbfc 0%,
    #f1f5f9 100%
  ); /* 浅灰色渐变 */
}

/* 面板切换按钮样式 */
.panel-toggle {
  position: absolute; /* 绝对定位 */
  top: calc(50% + 50px); /* 垂直居中偏下 */
  left: -16px; /* 左侧位置 */
  transform: translateY(-50%); /* 垂直居中 */
  z-index: 10; /* 堆叠顺序 */
}

/* 折叠状态下调整按钮位置 */
.right-panel.collapsed .panel-toggle {
  left: -16px;
  top: 50%;
}

.panel-toggle .el-button {
  width: 32px; /* 固定宽度 */
  height: 32px; /* 固定高度 */
  border-radius: 50%; /* 圆形按钮 */
  background: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
  border: 1px solid rgba(59, 130, 246, 0.2); /* 淡蓝色边框 */
  color: #3b82f6; /* 蓝色图标 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  transition: all 0.2s ease; /* 过渡效果 */
  backdrop-filter: blur(8px); /* 背景模糊 */
}

.panel-toggle .el-button:hover {
  background: #3b82f6; /* 悬停时蓝色背景 */
  color: white; /* 悬停时白色图标 */
  transform: scale(1.1); /* 悬停时放大 */
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); /* 悬停时阴影 */
}

/* 计划选择对话框样式 */
:deep(.el-dialog) {
  border-radius: 12px; /* 圆角 */
}

:deep(.el-dialog__header) {
  border-bottom: 1px solid #ebeef5; /* 底部边框 */
}

:deep(.el-table) {
  cursor: pointer; /* 手型光标 */
}

:deep(.el-table__row:hover) {
}

/* 响应式设计 - 适配不同屏幕尺寸 */
@media (max-width: 1200px) {
  .left-panel {
    width: 280px; /* 缩小左侧面板 */
  }

  .right-panel {
    width: 320px; /* 缩小右侧面板 */
  }
}

@media (max-width: 1024px) {
  .left-panel {
    width: 250px; /* 进一步缩小 */
  }

  .right-panel {
    width: 300px;
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .room-layout {
    flex-direction: column; /* 垂直排列 */
    gap: 0; /* 无间隔 */
  }

  .left-panel,
  .right-panel {
    width: 100%; /* 宽度100% */
    height: auto; /* 高度自动 */
    border-radius: 0; /* 无圆角 */
  }

  .right-panel {
    max-height: 300px; /* 限制高度 */
  }
}

/* 拖拽相关样式 */
.drag-handle {
  position: absolute;
  top: 50%;
  left: -18px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  backdrop-filter: blur(10px);
}

.drag-handle:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.4);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.2);
}

.drag-handle:active {
  cursor: grabbing;
  background: rgba(59, 130, 246, 0.2);
  transform: translateY(-50%) scale(0.95);
}

/* 拖拽图标样式 */
.drag-icon {
  color: #64748b;
  font-size: 16px;
  transition: all 0.2s ease;
}

.drag-handle:hover .drag-icon {
  color: #3b82f6;
}

.drag-handle:active .drag-icon {
  color: #1d4ed8;
}

/* 拖拽状态样式 */
.right-panel.dragging {
  transition: none;
  user-select: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.right-panel.dragging .drag-handle {
  cursor: grabbing;
  background: rgba(59, 130, 246, 0.3);
  border-color: rgba(59, 130, 246, 0.6);
  transform: translateY(-50%) scale(0.9);
}

/* 拖拽出来后的样式 */
.right-panel.dragged-out {
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  resize: both;
  overflow: auto;
  min-width: 320px;
  min-height: 400px;
  max-width: 600px;
  max-height: 80vh;
  transition: all 0.3s ease;
  /* 从flex布局中移除，不占据原有空间 */
  flex: none;
  width: auto !important;
}

.right-panel.dragged-out .drag-handle {
  left: -18px;
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(16, 185, 129, 0.3);
}

.right-panel.dragged-out .drag-handle:hover {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.5);
}

.right-panel.dragged-out .drag-icon {
  color: #10b981;
}

.right-panel.dragged-out .drag-handle:hover .drag-icon {
  color: #059669;
}

/* 拖拽出来时的动画效果 */
.right-panel.dragged-out .chat-panel {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  overflow: hidden;
}

/* 拖拽出来后的样式 */
.right-panel.dragged-out {
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  min-width: 300px;
  min-height: 400px;
  max-width: 800px;
  max-height: 90vh;
  overflow: auto;
}

/* 面板切换按钮在拖拽出来时隐藏 */
.right-panel.dragged-out .panel-toggle {
  display: none;
}

/* 拖拽时的全局样式 */
body.dragging {
  cursor: grabbing !important;
  user-select: none !important;
}

/* 拖拽预览效果 */
.right-panel.dragging::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    rgba(59, 130, 246, 0.1),
    rgba(29, 78, 216, 0.1)
  );
  pointer-events: none;
  border-radius: inherit;
}

/* 右侧面板占位符 */
.right-panel-placeholder {
  width: 0;
  flex-shrink: 0;
}

/* 拖拽出来的独立面板 */
.dragged-panel {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  overflow: auto;
  min-width: 300px;
  min-height: 400px;
  max-width: 1000px;
  max-height: 90vh;
  border: 2px solid rgba(59, 130, 246, 0.2);
}

.dragged-panel:hover {
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25);
  border-color: rgba(59, 130, 246, 0.3);
}

.dragged-panel .drag-handle {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(16, 185, 129, 0.3);
}

.dragged-panel .drag-handle:hover {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.5);
  transform: translateY(-50%) scale(1.1);
}

.dragged-panel .drag-icon {
  color: #10b981;
}

.dragged-panel .drag-handle:hover .drag-icon {
  color: #059669;
}

.dragged-panel .chat-panel {
  height: 100%;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  overflow: hidden;
}
</style>
